<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>销售统计</title>
    <link rel="stylesheet" href="../css/saleStatistical.css">
    <link rel="stylesheet" href="../lib/bootstrap-3.3.5-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/index.css">
    <link rel="stylesheet" href="../font/font.css">
    <script src="../lib/bootstrap-3.3.5-dist/js/jquery-1.11.3.js"></script>
    <script src="../lib/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
    <style>

    </style>
</head>

<body>
    <script src="../lib/jquery-1.11.3.js"></script>
    <script src="../lib/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>

    <div class="container-fluid">
        <div class="row">
            <!-- 这是侧边栏 -->
            <div id="kong" class="col-md-2"></div>
            <div id="main_menu" class="col-md-2">
                <ul id="myul">
                    <li id="logoli">
                        <div><span class="iconfont icon-shouyefill"></span><a href="../index.html">首页</a>
                        </div>
                    </li>
                    <li id="have">
                        <div><span class="iconfont icon-tongji" id="logo"></span>统计</div>
                        <ul>
                            <li><a href="../pages/zx_tongji.html">种植收购统计</a></li>
                            <li><a href="../pages/saleStatistical.html">销售统计</a> </li>
                            <li><a href="../pages/dj03.html">人员统计</a> </li>
                        </ul>
                    </li>
                    <li>
                        <div><span class="iconfont icon-zhongzhiguanli"></span>种植养殖</div>
                        <ul>
                            <li><a href="../pages/plant.html">蔬果</a></li>
                            <li><a href="../pages/farming.html">肉类</a></li>
                        </ul>
                    </li>
                    <li>
<<<<<<< HEAD
                        <div><span class="iconfont icon-caigou"></span>采购收购 </div>
                        <ul>
                            <li><a href="../pages/Supplier_management.html">供应商管理</a> </li>
                            <li><a href="../pages/pick_fruit.html">蔬果</a></li>
                            <li><a href="../pages/pick_meat.html">肉类</a></li>
                        </ul>

                    </li>
                    <li>
                        <div><span class="iconfont icon-yunshuzhongwuliu-xianxing"></span>运输</div>
                        <ul>
                            <li><a href="../pages/tran_meat.html">肉类运输</a></li>
                            <li><a href="../pages/tran_ve.html">蔬菜运输</a></li>
                        </ul>

                    </li>
                    <li>
                        <div><span class="iconfont icon-xinruku"></span>仓库</div>
                        <ul>
                            <li><a href="../pages/stockIn.html">入库</a></li>
                            <li><a href="../pages/stockOut.html">出库</a></li>
                        </ul>

=======
                        <div><span class="iconfont icon-caigou"></span>采购收购</div>
                            <ul>
                                <li><a href="../pages/Supplier_management.html">供应商管理</a> </li>
                                <li><a href="../pages/pick_fruit.html">蔬果</a></li>
                                <li><a href="../pages/pick_meat.html">肉类</a></li>
                            </ul>
                        
                    </li>
                    <li>
                        <div><span class="iconfont icon-yunshuzhongwuliu-xianxing"></span>运输</div>
                            <ul>
                                <li><a href="../pages/tran_meat.html">肉类运输</a></li>
                                <li><a href="../pages/tran_ve.html">蔬菜运输</a></li>
                            </ul>
                        
                    </li>
                    <li>
                        <div><span class="iconfont icon-xinruku"></span>仓库</div>
                            <ul>
                                <li><a href="../pages/stockIn.html">入库</a></li>
                                <li><a href="../pages/stockOut.html">出库</a></li>
                            </ul>
                        
>>>>>>> a773d574e6cecd0e073ea1612de971773431a973
                    </li>
                    <li>
                        <div><span class="iconfont icon-shejishengchan"></span><a href="../pages/production.html">生产</a>
                        </div>
                    </li>
                    <li>
                        <div><span class="iconfont icon-xiaoshou"></span>销售</div>
                            <ul>
                                <li><a href="../pages/zx_xiaoshou.html">销售流通</a></li>
                                <li><a href="../pages/online_sho_by.html">网购</a></li>
                                <li><a href="../pages/online_retreate.html">网购-退换记录</a></li>
                                <li><a href="../pages/zx_pima.html">批码管理</a></li>
                            </ul>
                        
                    </li>
                    <li>
                        <div><span class="iconfont icon-lajitong"></span><a
                                href="../pages/waste_management.html">废料去向</a></div>
                    </li>
                    <li>
                        <div><span class="iconfont icon-guanliyuan"></span>管理</div>
                        <ul id="secondary">
                            <li><a href="../pages/dj01.html">人员管理</a> </li>
                            <li><a href="../pages/dj02.html">操作日志</a> </li>
                            <li><a href="../pages/board.html">留言板</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
            <div id="left_content" class="col-md-10">
                <!-- 这是头 -->
                <nav id="main_headnav">
                    <div class="clear">
                        <div class="navlefspan">
                            <span class="iconfont icon-caidan" id="hidenmenu"></span>
                            <span class="mytitle">食品流通安全管理系统</span>
                        </div>
                        <div class="navrigspan">
                            <span class="iconfont icon-tixing" id="tx"></span>
                            <!-- 头像 -->
                            <img src="../images/shouye/tx.jpg" alt="">
                            <!-- 姓名 -->
                            <span id="tc">退出</span>
                        </div>
                    </div>
                    <div>
                        <!-- 这里写小的头 -->
                    </div>
                </nav>
                <div id="main_content">
                    <div id="mycentent">
                        <!-- 这是内容 -->
                        <div id="box">
                            <div id="main">
                                <p id="mynav"><span>统计</span><span>></span><span class="mycolor2">销售统计</span></p>
                                <h3 id="xiaoshoutongji">商品销售统计信息</h3>
                                <div id="fudong" class="clear">
                                    <div class="clear">
                                        <div id="zhuzhuang" style="width: 500px;height:400px;"></div>
                                        <div id="shanxing" style="width: 500px;height:400px;"></div>
                                    </div>
                                    <div id="place" style="width: 1000px;height:400px;"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="../js/index.js">
    </script>

</body>
<script>
    window.onload = function () {
        let x = $("#box").width()
        $('#box').width(x)
    }
</script>

</html>
<script src="../lib/echarts.min.js"></script>
<script>
    // 获取柱状图和扇形图节点
    let chartDomz = document.getElementById('zhuzhuang');
    let chartDoms = document.getElementById('shanxing');
    let chartDomp = document.getElementById('place');
    // 图表初始化
    let myChartz = echarts.init(chartDomz);
    let myCharts = echarts.init(chartDoms);
    let myChartp = echarts.init(chartDomp);
    let optionz;
    let options;
    let optionp;

    showEcharts();
    showTu();
    function showEcharts() {
        $.ajax({
            url: '/saleStatistical/get',
            data: {},
            success: (res) => {
                if (res.err) {
                    console.log(res);
                } else {
                    optionz = {
                        title: {
                            text: '不同商品的销售总额',
                            left: 'center',
                            textStyle: {
                                fontSize: 16,
                                color: '#555'
                            },
                        },
                        xAxis: {
                            type: 'category',
                            data: ['南瓜', '土豆', '莲藕', '西红柿',]
                        },
                        yAxis: {
                            type: 'value',
                            name: '销售总额（元）'
                        },
                        series: [
                            {
                                data: [
                                    // 南瓜
                                    {
                                        value: res.data[0][0].totala,
                                        itemStyle: {
                                            color: '#5CB9A4',
                                        }
                                    },
                                    // 土豆
                                    {
                                        value: res.data[0][1].totala,
                                        itemStyle: {
                                            color: '#5CB9A4',
                                        }
                                    },
                                    // 莲藕
                                    {
                                        value: res.data[0][2].totala,
                                        itemStyle: {
                                            color: '#5CB9A4',
                                        }
                                    },
                                    // 西红柿
                                    {
                                        value: res.data[0][3].totala,
                                        itemStyle: {
                                            color: '#5CB9A4',
                                        }
                                    }
                                ],
                                type: 'bar'
                            }
                        ]
                    };
                    myChartz.setOption(optionz);

                    options = {
                        title: {
                            text: '销售方式',
                            // subtext: 'Fake Data',
                            left: 'center',
                            textStyle: {
                                fontSize: 16,
                                color: '#555'
                            },
                        },
                        tooltip: {
                            trigger: 'item'
                        },
                        legend: {
                            orient: 'vertical',
                            left: 'left'
                        },
                        series: [
                            {
                                name: '销售方式',
                                type: 'pie',
                                radius: '50%',
                                data: [
                                    {
                                        value: res.data[1][0].totalb,
                                        name: res.data[1][0].type + res.data[1][0].totalb,
                                        itemStyle: {
                                            color: '#ffb600'
                                        }
                                    },
                                    {
                                        value: res.data[1][1].totalb,
                                        name: res.data[1][1].type + res.data[1][1].totalb,
                                        itemStyle: {
                                            color: 'rgb(92,185,164)'
                                        }
                                    }

                                ],
                                emphasis: {
                                    itemStyle: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }
                        ]
                    };
                    myCharts.setOption(options);
                }
            },
            error: (err) => {
                console.log(res.err);
            }
        })
    }
    function showTu() {
        $.ajax({
            url: '/statistic/place',
            data: {},
            success: (res) => {
                if (res.err) {
                    console.log(res);
                } else {
                    optionp = {
                        title: {
                            text: '商品的销售数量统计表',
                            left: 'center',
                            textStyle: {
                                fontSize: 16,
                                color: '#555'
                            },
                        },
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow'
                            }
                        },
                        legend: {},
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: {
                            type: 'value',
                            boundaryGap: [0, 0.01]
                        },
                        yAxis: {
                            type: 'category',
                            data: [
                                { value: res.data[0].lei },
                                { value: res.data[1].lei },
                                { value: res.data[2].lei },
                                { value: res.data[3].lei }
                            ]
                        },
                        series: [
                            {
                                // name: '2011',
                                type: 'bar',
                                data: [
                                    {
                                        value: res.data[0].num,
                                        itemStyle: {
                                            color: '#5CB9A4',
                                        }
                                    },
                                    {
                                        value: res.data[1].num,
                                        itemStyle: {
                                            color: '#5CB9A4',
                                        }
                                    },
                                    {
                                        value: res.data[2].num,
                                        itemStyle: {
                                            color: '#5CB9A4',
                                        }
                                    },
                                    {
                                        value: res.data[3].num,
                                        itemStyle: {
                                            color: '#5CB9A4',
                                        }
                                    }
                                ]
                            }
                        ]
                    };
                    myChartp.setOption(optionp);
                }
            },
            error: (err) => {
                console.log(res.err);
            }
        })
    }
</script>